<template>
  <div class="box" @contextmenu="handleContextMenu" ref="boxRef">
    <div class="menu">
      <van-cell v-for="item in 5" :key="item" :title="item" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const boxRef = ref<HTMLDivElement>();
const pos = reactive({
  x: `0px`,
  y: `0px`,
});
const handleContextMenu = (ev: MouseEvent) => {
  let { clientX, clientY } = ev;
  // console.log(ev);
  let h = boxRef.value!.offsetTop; //!代表开发者断定value存在
  console.log(h);
  pos.x = clientX + "px";
  pos.y = clientY - h + "px";
  ev.preventDefault();
};
</script>

<style scoped>
.box {
  height: 400px;
  border: 1px solid red;
  background-color: #d8d8d8;
  position: relative;
}
.menu {
  width: 100px;
  position: absolute;
  top: v-bind("pos.y");
  left: v-bind("pos.x");
}
</style>
